//系统自带
const path = require('path')

//手动下载(html)并引用
const HtmlWebpackPlugin = require('html-webpack-plugin')
//手动下载(css)并引用，并在js中引用需要的css文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
//手动下载 (压缩css)并引用
const CssMinimizerplugin = require('css-minimizer-webpack-plugin');


const config = {
    // 开发模式
    mode: 'development',
    // 入口
    entry: {
        admin_login: './src/manage/js/后台管理登录.js',
        admin_reg: './src/manage/js/后台管理注册.js',
        admin_index: './src/manage/js/后台首页.js',
    },
    // 出口
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name]_[hash].js',
        clean: true,
    },
    // 插件
    plugins: [
        new HtmlWebpackPlugin({
            //设置生成的html主文件的模板地址
            template: './src/manage/后台管理登录.html',
            //生成的文件名
            filename: '后台管理登录.html',
            //必须和上面入口名称一致
            chunks: ['admin_login']
        }),
        new HtmlWebpackPlugin({
            //设置生成的html主文件的模板地址
            template: './src/manage/后台管理注册.html',
            //生成的文件名
            filename: '后台管理注册.html',
            //必须和上面入口名称一致
            chunks: ['admin_reg']
        }),
        new HtmlWebpackPlugin({
            //设置生成的html主文件的模板地址
            template: './src/manage/后台首页.html',
            //生成的文件名
            filename: '后台首页.html',
            //必须和上面入口名称一致
            chunks: ['admin_index']
        }),
        // css插件
        new MiniCssExtractPlugin({
            // 路径及文件名
            filename: 'css/[name].css'
        })
    ],

    //除了js之外的其他模块如何处理（规则）
    module: {
        // css模块
        rules: [{
            test: /\.css$/,
            use: [MiniCssExtractPlugin.loader, 'css-loader']
        },
        // 图片
        {
            test: /\.(bmp|png|jpg|jpeg|gif)$/,
            type: 'asset',
            generator: {
                filename: 'images/[contenthash][ext]'
            }
        },
        // 其他规则
        {
            test: /\.tet$/,
            type: 'asset/source'
        },
        //字体文件
        {
            test: /\.(ttf|woff|woff2)/,
            type: 'asset/resource',
            generator: {
                filename: 'fonts/[id][ext]'
            }
        }
        ]

    },
    // css压缩优化
    optimization: {
        minimizer: [
            new CssMinimizerplugin(),
            '...'
        ],
    },
    devServer: {
        // 端口号
        port: 80,
        //开启热更新
        hot: true,
        //打开服务器时自动开启浏览器访问
        open: {
            target: ['/后台管理登录.html']
        },
        //监控变化的文件，被监控的文件只要发生变化，就会重新编译，自动刷新浏览器
        watchFiles: ['./src/manage/后台管理登录.html', './src/manage/后台管理注册.html', './src/manage/后台首页.html'],
        static: {
            // 设置服务器根目录
            directory: path.join(__dirname, 'dist')
        },
        proxy: {
            '/api': {
                target: 'http://127.0.0.1:3000',
                // pathrewrite: {},
                changeOrigin: true
            }
        }
    }
}

module.exports = config